<template>
    <div id="baseRegister">
        <Title :title="title"></Title>
        <div class="courses" v-if="!flag">
            基地审核已通过，快去管理基地吧
        </div>
        <p v-if="flag" class="base_message">当前状态：等待提交入驻信息</p>
        <el-form v-if="flag" :model="ruleForm" label-width="160px" :inline="true" :rules="rules"
                 ref="ruleForm" >

<!--            基地名称-->
            <el-form-item label="基地名称" prop="baseName" >
                <el-input class="baseR_input" v-model="ruleForm.baseName" ></el-input>
            </el-form-item>

<!--            所属区域-->
            <el-form-item
                    prop="belongAddress" label="所属区域">
                <el-cascader class="baseR_input" :props="props" @change="handleCascader" ></el-cascader>
            </el-form-item>
            <br/>
<!--            所属级别-->
            <el-form-item
                    prop="belongRank" label="所属级别">
                <el-select class="baseR_input" v-model="ruleForm.belongRank" placeholder="市级/省级">
                    <el-option
                            v-for="item in level"
                            :key="item.id"
                            :label="item.dicName"
                            :value="item.dicName">
                    </el-option>
                </el-select>
            </el-form-item>

<!--            适应学段-->
            <el-form-item
                    prop="fitAge" label="适用学段">
                <el-select class="baseR_input" v-model="ruleForm.fitAge" placeholder="小学/初中/高中">
                    <el-option
                            v-for="item in stageType"
                            :key="item.id"
                            :label="item.dicName"
                            :value="item.dicName">
                    </el-option>
                </el-select>
            </el-form-item>

            <br/>
<!--            建设时间-->
            <el-form-item
                    prop="constructionTime" label="建设时间">
                <el-col :span="11">
                    <el-date-picker class="baseR_input" type="date" placeholder="选择日期" v-model="ruleForm.constructionTime"></el-date-picker>
                </el-col>
            </el-form-item>

<!--            特色标签-->
            <el-form-item
                    prop="baseFeatureId" label="特色标签">
                <el-select class="baseR_input" v-model="ruleForm.baseFeatureId" placeholder="请选择活动区域">
                    <el-option
                            v-for="item in baseType"
                            :key="item.id"
                            :label="item.dicName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <br/>
<!--            审批文号-->
            <el-form-item  label="审批文号"  prop="examineNumber">
                <el-input class="baseR_input" v-model="ruleForm.examineNumber"></el-input>
            </el-form-item>

<!--           归属教育行政部门 -->
            <el-form-item
                    label="归属教育行政部门" prop="educationId">
                <el-select class="baseR_input" v-model="ruleForm.educationId" placeholder="归属教育行政部门">
                    <el-option
                            v-for="item in education"
                            :key="item.id"
                            :label="item.dicName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <br/>
<!--     上传审批文件       -->
            <el-form-item  label="上传审批文件"
                           prop="examineFileUrl">
                <el-input  type="hidden" class="baseR_input" v-model="ruleForm.examineFileUrl"/>
                <el-upload
                        class="baseR_input"
                        action="/api/Studies_to_travel/upload/singleFile"
                        :file-list="fileList"
                        :limit="1"
                        :on-remove="examineFileUrlHandleRemove"
                        :on-success="examineFileUrlSuccess">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
                </el-upload>
            </el-form-item>
            <br/>
<!--          上传营业执照  -->
            <el-form-item label="上传营业执照" prop="businessUrl">
                <el-input  type="hidden" class="baseR_input" v-model="ruleForm.businessUrl"/>
                <el-upload
                        class="baseR_input"
                        action="/api/Studies_to_travel/upload/singleFile"
                        :file-list="fileList"
                        :limit="1"
                        :on-remove="businessUrlHandleRemove"
                        :on-success="businessUrlSuccess">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
                </el-upload>
            </el-form-item>
            <br/>
            <!--            封面-->
            <el-form-item  class="lableTitle" prop="coverImage" label="封面">
                <el-upload
                        name="file"
                        action="/api/Studies_to_travel/upload/singleFile"
                        :file-list="fileList"
                        list-type="picture-card"
                        :limit="1"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="success">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <br/>
<!--            法定代表人-->
            <el-form-item label="法定代表人"
                    prop="legal" >
                <el-input class="baseR_input " v-model="ruleForm.legal"></el-input>
            </el-form-item>

<!--            法定代表人联系方式-->
            <el-form-item label="法定代表人联系方式"
                    prop="legalPhone">
                <el-input class="baseR_input" v-model="ruleForm.legalPhone"></el-input>
            </el-form-item>

            <br/>
<!--           基地负责人 -->
            <el-form-item label="基地负责人"
                    prop="basePrincipal">
                <el-input class="baseR_input" v-model="ruleForm.basePrincipal"></el-input>
            </el-form-item>

<!--           基地负责人联系方式 -->
            <el-form-item label="基地负责人联系方式"
                    prop="basePrincipalPhone">
                <el-input class="baseR_input" v-model="ruleForm.basePrincipalPhone"></el-input>
            </el-form-item>

            <br/>
<!--            预定联系人-->
            <el-form-item label="预定联系人"
                    prop="reserve">
                <el-input class="baseR_input" v-model="ruleForm.reserve"></el-input>
            </el-form-item>

<!--           预定联系人联系方式 -->
            <el-form-item label="预定联系人联系方式"
                    prop="reservePhone">
                <el-input class="baseR_input" v-model="ruleForm.reservePhone"></el-input>
            </el-form-item>
            <br/>
<!--            预定联系人电子邮箱-->
            <el-form-item label="预定联系人电子邮箱"
                    prop="reserveEmail">
                <el-input class="baseR_input" v-model="ruleForm.reserveEmail"></el-input>
            </el-form-item>

<!--           固定电话 -->
            <el-form-item label="固定电话"
                    prop="invariabilityPhone">
                <el-input class="baseR_input" v-model="ruleForm.invariabilityPhone"></el-input>
            </el-form-item>
            <br/>

<!--            通讯地址-->
            <el-form-item label="通讯地址"
                    prop="mailingAddress">
                <el-input class="baseR_input" v-model="ruleForm.mailingAddress"></el-input>
            </el-form-item>
<!--            邮政编码-->
            <el-form-item label="邮政编码"
                    prop="postalCoding">
                <el-input class="baseR_input" v-model="ruleForm.postalCoding"></el-input>
            </el-form-item>
            <br/>
            <el-form-item class="itemButton" >
                <el-button type="danger" @click.prevent="sub('ruleForm')" class="base_danger">提交审核</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

    import
    {FormItem, Input, Form,DatePicker,Col,Select,Upload,Button,Option,Cascader,Dialog }
        from "element-ui";
    import {post} from "../../../../request/AxiosMAX";

    import Title from "@/components/title/Title";

    import {UPDATE_BASE_BASEID} from "../../../../store/actions-types";
    export default {
        name: "BaseRegister",
        data() {
            return {
                flag:true,
                dialogImageUrl:"",
                dialogVisible:false,
                //级联数据
                props: {
                    lazy: true,
                    lazyLoad (node, resolve) {
                        const { level } = node;
                        if (level===0){
                            post("/api/Studies_to_travel/address/queryByParent").then(
                                res=>{
                                    if (res.code===0){
                                        let nodes = [];
                                        res.data.forEach(item=>{
                                            let node = {};
                                            node.id = item.id;
                                            node.value = item.address;
                                            node.label = item.address;
                                            nodes.push(node);
                                        });
                                        resolve(nodes);
                                    }
                                }
                            );
                        }else if (level===1){
                            let data = {
                                parentId:node.data.id
                            };
                            console.info(data);
                            post("/api/Studies_to_travel/address/queryByParentId",data).then(
                                res=>{
                                    if (res.code===0){
                                        let nodes = [];
                                        res.data.forEach(item=>{
                                            let node = {};
                                            node.id = item.id;
                                            node.value = item.address;
                                            node.label = item.address;
                                            nodes.push(node);
                                        });
                                        resolve(nodes);
                                    }
                                }
                            );
                        }else {
                            let data = {
                                parentId:node.data.id
                            };
                            post("/api/Studies_to_travel/address/queryByParentId",data).then(
                                res=>{
                                    if (res.code===0){
                                        let nodes = [];
                                        res.data.forEach(item=>{
                                            let node = {};
                                            node.id = item.id;
                                            node.value = item.address;
                                            node.label = item.address;
                                            node.leaf = "leaf";
                                            nodes.push(node);
                                        });
                                        resolve(nodes);
                                    }
                                }
                            );
                        }
                    }
                },
                fileList: [],
                title:'入驻审核',
                //基地标签数组
                baseType:[],
                //适合学段
                stageType:[],
                //所属级别
                level:[],
                //教育部门
                education:[],
                ruleForm: {
                    coverImage:'',
                    baseName: '',
                    belongAddress:'',
                    belongRank:'',
                    fitAge:'',
                    constructionTime:'',
                    baseFeatureName:'',
                    examineNumber:'',
                    educationName:'',
                    examineFileUrl:'',
                    businessUrl:'',
                    legal:'',
                    legalPhone:'',
                    basePrincipal:'',
                    basePrincipalPhone:'',
                    reserve:'',
                    reservePhone:'',
                    reserveEmail:'',
                    invariabilityPhone:'',
                    mailingAddress:'',
                    postalCoding:'',
                    baseFeatureId:'',
                    educationId:''
                },
                rules: {
                    baseName:[
                        { required: true, message: '请输入基地名称', trigger: 'blur' }
                    ],
                    belongAddress:[
                        { required: true, message: '请输入所属区域', trigger: 'change' }
                    ],
                    belongRank:[
                        { required: true, message: '请输入所属级别', trigger: 'change' }
                    ],
                    fitAge:[
                        { required: true, message: '请输入适用学段', trigger: 'change' }
                    ],
                    constructionTime:[
                        { required: true, message: '请输入建设时间', trigger: 'blur' }
                    ],
                    baseFeatureId:[
                        { required: true, message: '请输入特色标签', trigger: 'change' }
                    ],
                    examineNumber:[
                        { required: true, message: '请输入审批文号', trigger: 'blur' }
                    ],
                    educationId:[
                        { required: true, message: '请输入归属教育行政部门', trigger: 'change' }
                    ],
                    legal:[
                        { required: true, message: '请输入法定代表人', trigger: 'blur' }
                    ],
                    legalPhone:[
                        { required: true, message: '请输入法定代表人联系方式', trigger: 'blur' }
                    ],
                    basePrincipal:[
                        { required: true, message: '请输入基地负责人', trigger: 'blur' }
                    ],
                    basePrincipalPhone:[
                        { required: true, message: '请输入基地负责人联系方式', trigger: 'blur' }
                    ],
                    reserve:[
                        { required: true, message: '请输入预定联系人', trigger: 'blur' }
                    ],
                    reservePhone:[
                        { required: true, message: '请输入预定联系人联系方式', trigger: 'blur' }
                    ],
                    reserveEmail:[
                        { required: true, message: '请输入预定联系人电子邮箱', trigger: 'blur' }
                    ],
                    invariabilityPhone:[
                        { required: true, message: '请输入固定电话', trigger: 'blur' }
                    ],
                    mailingAddress:[
                        { required: true, message: '请输入通讯地址', trigger: 'blur' }
                    ],
                    postalCoding:[
                        { required: true, message: '请输入邮政编码', trigger: 'blur' }
                    ],
                    coverImage:[
                        { required: true, message: '请上传封面', trigger: 'change' }
                    ],
                    examineFileUrl:[
                        { required: true, message: '请上传审核文件', trigger: 'change' }
                    ],
                    businessUrl:[
                        { required: true, message: '请上传营业执照', trigger: 'change' }
                    ]
                }
            }
        },
        components: {
            "el-form-item": FormItem,
            "el-input": Input,
            "el-form": Form,
            "el-date-picker": DatePicker,
            "el-col":Col,
            "el-select": Select,
            "el-button": Button,
            "el-option": Option,
            "el-upload": Upload,
            "el-cascader":Cascader,
            "el-dialog":Dialog,
            Title
        },
        watch:{
        },
        methods:{

            //营业执照上传成功的回调函数
            businessUrlSuccess(res){
                this.ruleForm.businessUrl = res.data;
            },
            //审核文件上传成功回调函数
            examineFileUrlSuccess(res){
                console.info(res);
                this.ruleForm.examineFileUrl = res.data;
            },
            //封面上传成功回调函数
            success(res){
                this.ruleForm.coverImage = res.data;
                console.info(res)
            },
            //营业执照移除图片
            businessUrlHandleRemove(file, fileList){
                this.ruleForm.businessUrl = "";
                console.log(file, fileList);
            },
            //审核文件移除上传文件的函数
            examineFileUrlHandleRemove(file, fileList){
                this.ruleForm.examineFileUrl = "";
                console.log(file, fileList);
            },
            //封面移除图片的函数
            handleRemove(file, fileList) {
                this.ruleForm.coverImage = "";
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //获得级联选择器中的值
            handleCascader(item){
                this.ruleForm.belongAddress = item[0]+item[1]+item[2];

            },
            //提交基地审核
            sub(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        //查询课程特色 课程特色字典code course_type
                        this.ruleForm.baseId=this.$store.state.user.id;
                        post("/api/Studies_to_travel/base/add",this.ruleForm)
                            .then(res=>{
                                if (res.code===0){
                                    console.info(res.data);
                                    //更新vuex中的base对象
                                    this.$store.dispatch(UPDATE_BASE_BASEID,res.data);
                                    //清楚表单数据
                                    this.$refs[formName].resetFields();
                                    this.$message({
                                        message: '提交成功~',
                                        type: 'success'
                                    });

                                    //跳转
                                    this.$router.push("/base/base/wait");

                                }else {
                                    this.$message({
                                        message: '提交失败~',
                                        type: 'error'
                                    });
                                }
                            })
                            .catch(err=>{
                                console.info(err);
                                this.$message({
                                    message: '网络错误~',
                                    type: 'error'
                                });
                            });
                    }
                })
            }
        },
        created() {

            if (this.$store.state.base){
                //跳转
                if (this.$store.state.base.auditState===1){
                    this.$router.push("/base/base/wait");
                }
                if (this.$store.state.base.auditState===0){
                    this.flag = false;
                }
            }
                    //查询课程特色 课程特色字典code course_type
            post("/api/Studies_to_travel/dict/queryByDicTypeCode",{dicTypeCode:"base_type"})
                .then(res=>{
                    //判断是否查询成功
                    if (res.code===0){
                        //赋值
                        this.baseType = res.data;
                    }
                })
                .catch(err=>{
                    console.info(err);
                });

            //查询适合学段 字典code stage_type
            post("/api/Studies_to_travel/dict/queryByDicTypeCode",{dicTypeCode:"stage_type"})
                .then(res=>{
                    //判断是否查询成功
                    if (res.code===0){
                        //赋值
                        this.stageType = res.data;
                    }
                })
                .catch(err=>{
                    console.info(err);
                });


            //查询级别 字典code level
            post("/api/Studies_to_travel/dict/queryByDicTypeCode",{dicTypeCode:"level"})
                .then(res=>{
                    //判断是否查询成功
                    if (res.code===0){
                        //赋值
                        this.level = res.data;
                    }
                })
                .catch(err=>{
                    console.info(err);
                });

            //查询教育部门 字典code dept_type
            post("/api/Studies_to_travel/dict/queryByDicTypeCode",{dicTypeCode:"dept_type"})
                .then(res=>{
                    //判断是否查询成功
                    if (res.code===0){
                        //赋值
                        this.education = res.data;
                    }
                })
                .catch(err=>{
                    console.info(err);
                });

        }
    }
</script>


<style scoped>

    .baseR_input{
        display: inline-block;
        width: 300px;
    }
    .itemButton{
        margin-left: 40%;
    }
    .courses{
         padding-top: 10%;
         padding-left: 25%;
         font-size: 40px;
     }

</style>

